<template>
  <div class="sitesTable">
    <table class="tableInfo" style="background-color: white">
      <tbody>
        <tr>
          <td width="25%" style="background-color: rgb(217, 237, 247)">
            <label class="control-label text-info">Target Sites</label>
          </td>
          <td id="Product" width="25%">{{ sitesForm.targetSites }}</td>
          <td width="25%" style="background-color: rgb(217, 237, 247)">
            <label class="control-label text-info">Production Test Site</label>
          </td>
          <td id="Product" width="25%">{{ sitesForm.productionSites }}</td>
        </tr>
        <tr>
          <td width="25%" style="background-color: rgb(217, 237, 247)">
            <label class="control-label text-info">Effective Test Site</label>
          </td>
          <td id="Product" width="25%" class="item-info">
            <el-tooltip placement="top-start">
              <div slot="content">{{ sitesForm.effectiveSites }}</div>
              <span>{{ sitesForm.effectiveSites }}</span>
            </el-tooltip>
          </td>
          <td width="25%" style="background-color: rgb(217, 237, 247)">
            <label class="control-label text-info">Real-time Test Site</label>
          </td>
          <td id="Product" width="25%" class="item-info">
            <el-tooltip placement="top-start">
              <div slot="content">{{ sitesForm.rtSites }}</div>
              <span>{{ sitesForm.rtSites }}</span>
            </el-tooltip>
          </td>
        </tr>
        <tr>
          <td width="25%" style="background-color: rgb(217, 237, 247)">
            <label class="control-label text-info">Average Site Yield Gap</label>
          </td>
          <td id="Product" width="25%">{{ sitesForm.avgSiteGap }}</td>
          <td width="25%" style="background-color: rgb(217, 237, 247)">
            <label class="control-label text-info">Real-time Site Yield Gap</label>
          </td>
          <td id="Product" width="25%">{{ sitesForm.rtSiteGap }}</td>
        </tr>
      </tbody>
    </table>
    <dynTable
      ref="dynTable"
      :loading="false"
      :table-data="sitesForm.sitesInfoList"
      :table-columns="tableColumns"
    />
    <div class="more" @click="doMore">more...</div>
    <el-dialog
      :visible.sync="innerVisible"
      :before-close="handleClose"
      width="44%"
      title="all site info"
      append-to-body>
      <el-row>
        <el-col :span="24">
          <el-form :inline="true" :model="formInline" >
            <el-form-item label="siteId">
              <el-input v-model="formInline.SiteIds"/>
            </el-form-item>
            <el-form-item>
              <el-input-number v-model="formInline.SiteIdMin" controls-position="right"/>
              ~
              <el-input-number v-model="formInline.SiteIdMax" controls-position="right"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="doSearch">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <dynTable
        ref="dynTable"
        :loading="false"
        :table-data="moreTableData"
        :table-columns="tableColumns"
      />
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        :pager-count="5"
        layout="total, prev, pager, next"
        @pagination="getList"
      />
      <!-- @current-change="handleCurrentChange" -->
    </el-dialog>
  </div>
</template>
<script>
import eqpAreaApi from '@/api/production/eqpMonitor'
import { clearNull } from '@/utils/myTools'

export default {
  name: 'SitesTable',
  props: {
    sitesForm: {
      type: Object,
      default: () => ({})
    },
    EqpId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableColumns: [
        { prop: 'siteId', label: 'SiteID' },
        { prop: 'isHardBin', label: 'Type' },
        { prop: 'testedQty', label: 'Total' },
        { prop: 'passQty', label: 'Pass' },
        { prop: 'rejectQty', label: 'Reject' },
        { prop: 'avgYield', label: 'AVG Yield' },
        { prop: 'rtYield', label: 'RT Yield' },
        { prop: 'avgUph', label: 'AVG UPH' },
        { prop: 'rtUph', label: 'RT UPH' }
      ],
      options: {
        stripe: true,
        align: 'center',
        showIndex: true,
        selection: false // 时候否展示选中框
      }, // 配置项
      operation: {
        label: '',
        isShow: false
      }, // 操作项
      total: 0,
      listQuery: {
        page: 1,
        size: 10
      },
      innerVisible: false,
      moreTableData: [],
      formInline: {}
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    doMore() {
      this.innerVisible = true
      this.initList()
    },
    // 获取site列表
    async initList() {
      let obj = {
        EqpId: this.EqpId,
        ...this.formInline,
        ...this.listQuery
      }
      obj = clearNull(obj)
      const res = await eqpAreaApi.getSiteInfoList(obj)
      this.moreTableData = Array.isArray(res.data.sitesInfoList) ? res.data.sitesInfoList : []
      this.total = res.total || 0
    },
    // 点击查询
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    getList(page) {
      this.listQuery = page
      this.initList()
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>
<style lang='scss' scoped>
table {
  max-width: 100%;
  margin-bottom: 20px;
      box-sizing: border-box;
    border-spacing:0;
}
.tableInfo {
  border: 1px solid #dddddd;
  width: 100%;
  table-layout: fixed;
  .text-info {
    color: #3a87ad;
  }
  tr td {
    padding: 0 6px;
    border-top: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
  }
}
::v-deep .el-table th, .el-table td{
  padding: 0;
  font-size:12px
}
.item-info{
  overflow: hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.more{
  width: 100%;
  padding: 5px 0;
  text-align: center;
  color: #3a87ad;
  cursor: pointer;
}
</style>
